<template>
	<el-col :span="componentModel.col*6" v-show="visible">
		<el-row>
			<el-col :span="8" class="field-label-div" v-if="!componentModel.noLabel">
				<label class="field-label">{{componentModel.label}}</label>
			</el-col>
			<el-col :span="componentModel.fieldcol">
				<div class="el-select el-select--mini" @click="onClickHandler" v-show="visible">
					<div class="el-input el-input--mini el-input--suffix">
						<input type="text" readonly="readonly" autocomplete="off" placeholder="请选择"
							class="el-input__inner" v-model="v_text_model">
						<span class="el-input__suffix"><span class="el-input__suffix-inner"><i
									class="el-input__icon el-icon-search"></i>
							</span>
						</span>
					</div>
					<input type="hidden" v-model="v_value_model" />
				</div>
			</el-col>
		</el-row>
		<SearchDialog ref="searchDialog"></SearchDialog>
	</el-col>
</template>

<script>
	import {
		sendComponentValueChangeRequest,
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import SearchDialog from '@/components/SearchDialog.vue';
	import utils from '@/utils/utils.js';
	export default {
		name: "SearchComponent",
		components: {
			SearchDialog
		},
		props: ["componentModel", "scope"],
		data() {
			return {
				v_text_model: "",
				v_value_model: "",
				datamodel: [],
				visible: true,
				readonly: false,
				label: "",
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			setProp(prop) {
				var dataModel = prop["options"];
				if (dataModel != undefined && dataModel != null) {
					this.datamodel = dataModel;
				}
				for (var k in prop) {
					if (k == "value") {
						this.v_value_model = prop[k];
						var isExists = false;
						for (var i = 0; i < this.datamodel.length; i++) {
							if (this.datamodel[i].value == this.v_value_model) {
								this.v_text_model = this.datamodel[i].name;
								isExists = true;
								break;
							}
						}
						if (!isExists) {
							this.v_text_model = "";
						}
					} else if (k == "visible") {
						this.visible = prop[k];
					} else if (k == "readonly") {
						this.readonly = prop[k];
					} else if (k == "label") {
						this.label = prop[k];
					}
				}
			},
			onClickHandler() {
				if (this.readonly) {
					return;
				}
				this.$refs.searchDialog.setVisible(true, this);
			},
			searchCallback(value, name) {
				if (value == null) {
					this.v_value_model = "";
				} else {
					this.v_value_model = value;
				}
				this.v_text_model = name;
				this.datamodel.push({
					"name": name,
					"value": value
				});

				if (this.scope != undefined) {
					this.$emit("onValueChange", this);
					return;
				}
				sendComponentValueChangeRequest(this);
			},
			setSelectedValue(value) {
				if (value == null) {
					this.v_value_model = "";
					this.v_text_model = "";
					return;
				}
				sendComponentEventRequest(this, "searchValueDisplayEvent", {
					"value": value
				});
			},
			getValue() {
				return this.v_value_model == null ? "" : this.v_value_model;
			}
		},
	}
</script>

<style>
</style>
